// 引入 发送请求的方法
import { request } from "../../request/index.js"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧菜单
    currertIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0,
  },
  // 接口的返回数据
  Cates: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1.先判断本地缓存中有没有旧数据，
    //   没有  就发送新的请求
    //   有  并且旧数据没有过期，就使用；  

    // 获取本地存储中的数据
    const Cates = wx.getStorageSync('cates')

    if (!Cates) {
      // 不存在  发送请求获取数据
      this.getCates();
    } else {
      // 有旧数据 定义过期时间
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates()
      } else {
        // console.log("可以使用旧的数据");
        this.Cates = Cates.data
        
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  // 获取分类数据
  getCates() {
    request({
      url: "/categories"
    }).then(result => {
      this.Cates = result.data.message;
      // 将接口的数据存入到本地缓存中
      wx.setStorageSync('cates', { time: Date.now(), data: this.Cates })

      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map(v => v.cat_name);
      // 构造右侧的菜单数据
      let rightContent = this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightContent
      })

    })
  },
  // 左侧菜单的点击事件
  handleItemTap(e) {
    console.log(e);
    // 1.获取被点击的标题身上的索引
    // 2.给data中的currentIndex赋值
    // 3.根据不同的索引显示不同的内容
    const { index } = e.currentTarget.dataset
    let rightContent = this.Cates[index].children;

    this.setData({
      currertIndex: index,
      rightContent,
      // 重新设置 右侧内容的scroll-view标签距离顶部的距离
      scrollTop: 0
    });


  }
})